<template>
  <view class="login-wrap">
    <view class="user_avatar_wrap">
      <image
        src="https://pic1.zhimg.com/v2-fda399250493e674f2152c581490d6eb_1200x500.jpg"
        mode="widthFix"
        lazy-load="false"
      >
      </image>
    </view>
    <form @submit="handleRegister">
      <view class="uni-form-item">
        <uni-icons class="login-icon" size="24" type="contact"/>
        <input class="uni-input" name="username" placeholder="请输入用户名" v-model="form.username">
      </view>
      <view class="uni-form-item">
        <uni-icons class="login-icon" size="24" type="locked-filled"/>
        <input
          class="uni-input"
          name="password"
          placeholder="请设置密码"
          type="text"
          v-model="form.password"
        >
      </view>
      <view class="uni-form-item">
        <uni-icons class="login-icon" size="24" type="locked-filled"/>
        <input
          class="uni-input"
          name="rePassword"
          placeholder="请再次输入密码"
          type="text"
          v-model="form.rePassword"
        >
      </view>
      <button form-type="submit" style="margin-top: 30px" type="primary">注册</button>
    </form>
    <navigator open-type="navigateBack" url="/pages/login/index" class="action">
      <text>已有账户，立即登录</text>
    </navigator>
  </view>
</template>
<script>
var graceChecker = require('graceUI/graceChecker.js')
import { uniIcons } from '@dcloudio/uni-ui'
import { register } from 'mock/login'

export default {
  components: {
    uniIcons
  },
  data() {
    return {
      form: {
        username: '',
        password: '',
        rePassword: ''
      }
    }
  },
  methods: {
    handleRegister(e) {
      // 表单验证
      var rule = [
        {
          name: 'username',
          checkType: 'notnull',
          errorMsg: '请输入用户名'
        },
        {
          name: 'password',
          checkType: 'notnull',
          errorMsg: '请输入密码'
        },
        {
					name: 'rePassword',
					checkType: 'same',
					checkRule: this.form.password,
					errorMsg: '两次密码不一致'
				}
      ]
      var formData = e.detail.value
      var checkRes = graceChecker.check(formData, rule)
      // 验证通过
      if (checkRes) {
        uni.showLoading({
					title: '正在注册',
					mask: true
				})
        register(this.form).then(res => {
          uni.showToast({
            title: res.data,
            success: () => {
              setTimeout(() => {
                uni.navigateBack({
                  delta: 1
                })
              }, 1000)
            }
          })
        })
      } else {
        uni.hideLoading()
        uni.showToast({
          title: graceChecker.error,
          icon: 'none'
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.login-wrap {
  padding-top: 100upx;
  .user_avatar_wrap {
    width: 200upx;
    height: 200upx;
    margin: 0upx auto 100upx;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid $uni-border-color;
    image {
      width: 100%;
    }
  }
  .login-icon {
    background-color: $uni-bg-white-color;
    padding-left: 10upx
  }
  .action {
    margin-top: 60upx;
    text-align: center;
    line-height: 50upx;
    color: #0079f1
  }
}
</style>
